<template>
  <el-card class="box-card" style="margin: 20px">
    <!--用户信息表单-->
    <el-form label-width="80px" :model="userInfoForm">
      <el-form-item label="头像">
        <div>
          <el-upload
            class="avatar-uploader"
            :action="avatarUploadUrl"
            :onSuccess="handleSuccess"
            :show-file-list="false"
            :headers="headers">
            <img v-if="userInfoForm.avatar" :src="userInfoForm.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="学号">
        <el-input disabled v-model="userInfoForm.idNumber"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="userInfoForm.username"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="userInfoForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userInfoForm.email"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userInfoForm.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
          <el-radio label="2">不方便透露</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="update">保存</el-button>
      </el-form-item>
    </el-form>


  </el-card>

</template>

<script>
import { getUserInfoApi, updateUserInfoApi } from "@/api/UserInfoApi";

export default {
  name: "UserInfo",
  data() {
    return {
      avatarUploadUrl: this.$uploadUrl + '/avatar',
      headers: {
        token: localStorage.getItem("token")
      },
      userInfoForm: {
        userSex: 0,
      }
    }
  },
  methods: {
    getUserInfo() {
      getUserInfoApi().then(res => {
        if (res.code === 200) {
          this.userInfoForm = res.data
        }
      })
    },
    update() {
      updateUserInfoApi(this.userInfoForm).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功")
        } else {
          this.$message.error("修改失败")
        }
      })
      localStorage.setItem("userInfo", JSON.stringify(this.userInfoForm))
      window.location.reload()
    },
    handleSuccess(res) {
      if (res.code === 200) {
        this.userInfoForm.avatar = "http://" + window.location.hostname + ":8888/images/" + res.data.path
        this.$message.success("上传成功")
      } else {
        this.$message.error("上传失败")
      }
    }
  },
  created() {
    this.getUserInfo()
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
